<template>
    <view class="create-record">
        <uni-forms ref="form" :modelValue="formData" :rules="rules">
            <uni-forms-item label="记录地址:" name="recordAddress" required>
				<uni-easyinput type="text" v-model="formData.recordAddress" placeholder="请输入记录地址" />
            </uni-forms-item>
            <!-- <uni-forms-item label="具体地址:" name="detailAddress" required>
				<uni-easyinput type="text" v-model="formData.detailAddress" placeholder="请输入具体地址" />
            </uni-forms-item> -->
			<uni-forms-item label="经／纬度:" name="latitudeLongitude" required>
				<uni-easyinput type="text" v-model="formData.latitudeLongitude" placeholder="请获取经／纬度" disabled/>
				<view class="input-text" @click="changeAddress">修改</view>
            </uni-forms-item>
			<uni-forms-item label="观鸟日期:" name="date" required>
				<picker mode="date" :value="formData.date" @change="bindDateChange">
					<view class="uni-input">{{formData.date}}</view>
				</picker>
            </uni-forms-item>
			<uni-forms-item label="开始时间:" name="start" required>
				<picker mode="time" :value="formData.start" @change="bindStartChange">
					<view class="uni-input">{{formData.start}}</view>
				</picker>
            </uni-forms-item>
			<uni-forms-item label="结束时间:" name="end" required>
				<picker mode="time" :value="formData.end" @change="bindEndChange">
					<view class="uni-input">{{formData.end}}</view>
				</picker>
            </uni-forms-item>
			<uni-forms-item label="记录方式:" name="type" required>
				<picker mode="selector" :range="typeList" range-key="name" :value="formData.typeIndex" @change="bindTypeChange">
					<view class="uni-input">{{typeList[formData.typeIndex].name}}</view>
				</picker>
            </uni-forms-item>
			<uni-forms-item label="备注:" name="remark">
				<textarea placeholder="请输入备注" v-model="formData.remark" />
            </uni-forms-item>
        </uni-forms>
		<operate-footer from='create' @create='submit' />
    </view>
</template>

<script>
	import amap from '@/static/amap-wx.130.js'
	
	export default {
		name: 'create-record',
		data() {
			const rule = {
				rules: [{required: true, errorMessage: '不能为空'}]
			}
			const nowDate = new Date()
			return {
				key: '24e9d329a7210276bb5c8338421a7cc5',
				amapPlugin: null,  
				loading: false,
				formData: {
					recordAddress: '',
					// detailAddress: '',
					latitudeLongitude: '',
					date: `${nowDate.getFullYear()}-${nowDate.getMonth()+1}-${nowDate.getDate()}`,
					start: `${nowDate.getHours()}:${nowDate.getMinutes()}`,
					end: `${nowDate.getHours() > 22 ? 24 : nowDate.getHours()+1}:${nowDate.getMinutes()}`,
					typeIndex: 0,
					remark: '',
				},
				rules: {
					recordAddress: rule,
					// detailAddress: rule,
					latitudeLongitude: rule,
					date: rule,
					start: rule,
					end: rule,
					type: rule,
				},
				typeList: [{name: '定点'}, {name: '样线'}, {name: '随机'}, {name: '环志'}]
			}
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res=>{
					uni.showModal({
					    title: '保存数据',
					    content: '是否提交保存记录？',
					    success: function (resModal) {
					        if (resModal.confirm) {
								uni.navigateTo({
								    url: '/pages/create-record/bird?id=xxx',
								})
					        }
					    }
					});
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			changeAddress() {
				uni.chooseLocation({
				    success: (res) => {
						this.formData.latitudeLongitude = res.longitude + '/' + res.latitude
						this.formData.recordAddress = res.address + res.name
				    }
				});
			},
			bindDateChange(event) {
				this.formData.date = event.detail.value
			},
			bindStartChange(event) {
				this.formData.start = event.detail.value
			},
			bindEndChange(event) {
				this.formData.end = event.detail.value
			},
			bindTypeChange(event) {
				this.formData.typeIndex = event.detail.value
			}
		},
		mounted() {	
			this.loading = true
			this.amapPlugin.getRegeo({  
				success: (data) => {  
					const res = data[0]
					// const addressComponent = res.regeocodeData.addressComponent
					// let recordAddress = []
					this.formData.latitudeLongitude = res.longitude + '/' + res.latitude
					
					// if (addressComponent.province.length > 0) recordAddress.push(addressComponent.province)
					// if (addressComponent.city.length > 0) recordAddress.push(addressComponent.city)
					// if (addressComponent.district.length > 0) recordAddress.push(addressComponent.district)
					// this.formData.recordAddress = recordAddress.join('-')
					
					this.formData.recordAddress = res.regeocodeData.formatted_address
					this.loading = false
				},
				file: (err) => {
					console.log(err)
					this.loading = false
				}
			}); 
		},
		onLoad() {  
			this.amapPlugin = new amap.AMapWX({  
				key: this.key  
			}); 
		} 
	}
</script>

<style lang="scss" scoped>
	.create-record {
		padding: 40rpx 24rpx;
		// ::v-deep uni-picker {
		// 	height: 100%;
		// 	line-height: 100%;
		// }
		::v-deep .uni-input {
		    min-height: 36px;
		    line-height: 36px;
		    display: flex;
		    box-sizing: border-box;
		    flex-direction: row;
		    align-items: center;
		    border: 1px solid #DCDFE6;
		    border-radius: 4px;
		    padding-left: 10px;
		}
		::v-deep textarea {
			border: 1px solid #DCDFE6;
			border-radius: 4px;
			padding: 4px 4px 4px 8px;
			width: calc(100% - 14px);
			.textarea-placeholder {
				color: #999;
				font-size: 12px;
				font-weight: 200;
			}
		}
	}
	.input-text {
		display: inline-block;
		position: absolute;
		right: 0;
		top: 0;
		width: 100rpx;
		min-height: 36px;
		line-height: 36px;
		text-align: center;
		background-color: $uni-color-warning;
		color: #fff;
		z-index: 999;
	}
</style>
